<template>
  <view
    class="navigationBar"
    :style="{
      height: navigationBarHeight,
      paddingTop: navigationBarHeightPaddingTop,
    }"
  >
    <view class="barContent">
      <slot>
        <BackArrow v-if="backIcon" class="backArrow" />
        <view
          v-if="title"
          class="titleText"
          :style="{ height: ststemButtonHeight }"
          >{{ title }}</view
        >
        <view v-if="showShare" class="customShareButton" :style="shareBtnStyle">
          <image
            class="customShareIcon"
            src="/static/images/share/customShareIcon.png"
            mode=""
          ></image>
        </view>
      </slot>
    </view>
  </view>
  <view class="zhanwei" :style="{ height: navigationBarHeight }"></view>
</template>

<script setup>
import { ref, toRef } from "vue";
import BackArrow from "./BackArrow.vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  showShare: {
    type: Boolean,
    default: false,
  },
	back: {
    type: Boolean,
    default: false,
  },
});

const title = toRef(props, "title");
const showShare = toRef(props, "showShare");
const backIcon = toRef(props, "back");

const { top, bottom, width, height, left, right } =
  wx.getMenuButtonBoundingClientRect();
console.log("rect", {
  top,
  bottom,
  width,
  height,
  left,
  right,
});

const navigationBarHeight = `calc(${bottom}px + 32rpx)`;
const navigationBarHeightPaddingTop = `${top}px`;
const ststemButtonHeight = `${bottom - top}px`;

const shareBtnStyle = {
  height: ststemButtonHeight,
  left: `calc(${left}px - 12rpx)`,
  "border-radius": `calc(${ststemButtonHeight} / 2)`,
};

defineExpose({
  ststemButtonHeight,
  top,
  bottom,
  width,
  height,
  left,
  right,
});
</script>

<style lang="scss">
.zhanwei {
  width: 100%;
}

.backArrow {
  margin-right: 24rpx;
}

.navigationBar {
  background-image: linear-gradient(90deg, #59c3f8 0, #36a1ee 100%);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
}

.barContent {
  flex: 1;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.titleText {
  font-size: 32rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.customShareButton {
  position: absolute;
  top: 0;
  width: 74rpx;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-100%);
  display: flex;
  justify-content: center;
  align-items: center;

  .customShareIcon {
    width: 28rpx;
    height: 33rpx;
  }
}
</style>
